<template>
  <div class="settings">
    <div class="settings-container">
      <h1 class="page-title">个人设置</h1>
      
      <div v-if="!userStore.isLoggedIn" class="not-logged-in">
        <h2>请先登录</h2>
        <p>您需要登录后才能访问个人设置</p>
        <button class="login-btn" @click="goToLogin">
          前往登录
        </button>
      </div>
      
      <div v-else class="settings-content">
        <!-- 个人信息设置 -->
        <div class="setting-section">
          <h2 class="section-title">个人信息</h2>
          <div class="setting-card">
            <form @submit.prevent="updateProfile" class="profile-form">
              <div class="form-group">
                <label for="username">用户名</label>
                <input 
                  type="text" 
                  id="username" 
                  v-model="profileForm.name"
                  placeholder="请输入用户名"
                  required
                />
              </div>
              
              <div class="form-group">
                <label for="email">邮箱</label>
                <input 
                  type="email" 
                  id="email" 
                  v-model="profileForm.email"
                  placeholder="请输入邮箱地址"
                />
              </div>
              
              <div class="form-group">
                <label for="phone">手机号</label>
                <input 
                  type="tel" 
                  id="phone" 
                  v-model="profileForm.phone"
                  placeholder="请输入手机号"
                />
              </div>
              
              <div class="form-group">
                <label for="address">收货地址</label>
                <textarea 
                  id="address" 
                  v-model="profileForm.address"
                  placeholder="请输入详细收货地址"
                  rows="3"
                ></textarea>
              </div>
              
              <button type="submit" class="save-btn">
                保存设置
              </button>
            </form>
          </div>
        </div>
        
        <!-- 账户安全 -->
        <div class="setting-section">
          <h2 class="section-title">账户安全</h2>
          <div class="setting-card">
            <div class="security-item">
              <div class="security-info">
                <h3>修改密码</h3>
                <p>定期修改密码可以保护账户安全</p>
              </div>
              <button class="action-btn" @click="changePassword">
                修改密码
              </button>
            </div>
            
            <div class="security-item">
              <div class="security-info">
                <h3>登录记录</h3>
                <p>查看最近的登录记录</p>
              </div>
              <button class="action-btn" @click="viewLoginHistory">
                查看记录
              </button>
            </div>
          </div>
        </div>
        
        <!-- 购物偏好 -->
        <div class="setting-section">
          <h2 class="section-title">购物偏好</h2>
          <div class="setting-card">
            <div class="preference-item">
              <label class="switch-label">
                <input 
                  type="checkbox" 
                  v-model="preferences.emailNotifications"
                  @change="savePreferences"
                />
                <span class="switch"></span>
                <span class="label-text">邮件通知</span>
              </label>
              <p class="preference-desc">接收订单状态和促销活动邮件</p>
            </div>
            
            <div class="preference-item">
              <label class="switch-label">
                <input 
                  type="checkbox" 
                  v-model="preferences.smsNotifications"
                  @change="savePreferences"
                />
                <span class="switch"></span>
                <span class="label-text">短信通知</span>
              </label>
              <p class="preference-desc">接收重要订单状态短信提醒</p>
            </div>
            
            <div class="preference-item">
              <label class="switch-label">
                <input 
                  type="checkbox" 
                  v-model="preferences.recommendations"
                  @change="savePreferences"
                />
                <span class="switch"></span>
                <span class="label-text">个性化推荐</span>
              </label>
              <p class="preference-desc">根据购买历史推荐相关商品</p>
            </div>
          </div>
        </div>
        
        <!-- 危险操作 -->
        <div class="setting-section">
          <h2 class="section-title">危险操作</h2>
          <div class="setting-card danger-zone">
            <div class="danger-item">
              <div class="danger-info">
                <h3>清空购物车</h3>
                <p>清空购物车中的所有商品</p>
              </div>
              <button class="danger-btn" @click="clearCart">
                清空购物车
              </button>
            </div>
            
            <div class="danger-item">
              <div class="danger-info">
                <h3>注销账户</h3>
                <p>永久删除账户和所有相关数据</p>
              </div>
              <button class="danger-btn" @click="deleteAccount">
                注销账户
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { useCartStore } from '../stores/cart'

const router = useRouter()
const userStore = useUserStore()
const cartStore = useCartStore()

const profileForm = reactive({
  name: '',
  email: '',
  phone: '',
  address: ''
})

const preferences = reactive({
  emailNotifications: true,
  smsNotifications: false,
  recommendations: true
})

onMounted(() => {
  if (userStore.isLoggedIn) {
    // 从用户信息初始化表单
    profileForm.name = userStore.userInfo.name
    profileForm.email = userStore.userInfo.email || ''
    profileForm.phone = userStore.userInfo.phone || ''
    profileForm.address = userStore.userInfo.address || ''
  }
})

const goToLogin = () => {
  router.push('/user')
}

const updateProfile = () => {
  // 更新用户信息
  userStore.login({
    ...userStore.userInfo,
    name: profileForm.name,
    email: profileForm.email,
    phone: profileForm.phone,
    address: profileForm.address
  })
  alert('个人信息已更新！')
}

const changePassword = () => {
  alert('修改密码功能（演示模式）\n\n这里可以实现密码修改功能')
}

const viewLoginHistory = () => {
  alert('登录记录功能（演示模式）\n\n显示最近的登录时间和IP地址')
}

const savePreferences = () => {
  // 保存偏好设置到本地存储
  localStorage.setItem('userPreferences', JSON.stringify(preferences))
  alert('偏好设置已保存！')
}

const clearCart = () => {
  if (confirm('确定要清空购物车中的所有商品吗？')) {
    cartStore.clearCart()
    alert('购物车已清空！')
  }
}

const deleteAccount = () => {
  if (confirm('确定要注销账户吗？此操作无法撤销！')) {
    userStore.logout()
    cartStore.clearCart()
    alert('账户已注销！')
    router.push('/')
  }
}
</script>

<style scoped>
.settings {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.settings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}

.not-logged-in {
  text-align: center;
  background: white;
  border-radius: 12px;
  padding: 60px 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.not-logged-in h2 {
  font-size: 1.8rem;
  color: #666;
  margin-bottom: 16px;
}

.not-logged-in p {
  color: #888;
  margin-bottom: 24px;
}

.login-btn {
  padding: 14px 32px;
  background-color: #007acc;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.login-btn:hover {
  background-color: #005c99;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.setting-section {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 24px;
  color: #333;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 12px;
}

.setting-card {
  margin-top: 20px;
}

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007acc;
}

.save-btn {
  padding: 14px 32px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
  align-self: flex-start;
}

.save-btn:hover {
  background-color: #218838;
}

.security-item,
.danger-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
}

.security-item:last-child,
.danger-item:last-child {
  border-bottom: none;
}

.security-info h3,
.danger-info h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #333;
}

.security-info p,
.danger-info p {
  color: #666;
  font-size: 0.9rem;
}

.action-btn {
  padding: 10px 20px;
  background-color: #007acc;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.action-btn:hover {
  background-color: #005c99;
}

.preference-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid #e0e0e0;
}

.preference-item:last-child {
  border-bottom: none;
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.switch {
  position: relative;
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}

.switch::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .switch {
  background-color: #007acc;
}

input[type="checkbox"]:checked + .switch::before {
  transform: translateX(26px);
}

.label-text {
  font-weight: 600;
  color: #333;
}

.preference-desc {
  color: #666;
  font-size: 0.9rem;
  margin-left: 62px;
}

.danger-zone {
  border: 2px solid #dc3545;
  border-radius: 8px;
}

.danger-btn {
  padding: 10px 20px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.danger-btn:hover {
  background-color: #c82333;
}

@media (max-width: 768px) {
  .security-item,
  .danger-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .action-btn,
  .danger-btn {
    align-self: stretch;
    text-align: center;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .setting-section {
    padding: 24px 20px;
  }
}
</style> 